<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png"/>
				</div>
				<div class="add">
					核验码核验
				</div>
				<div>
				</div>
			</div>

		</div>
		<div class="lists">
            
			  <div class="inp">
			  	<p>手机号</p>
			  	<input type="text" v-model="phone" placeholder="请输入手机号"/>
			  </div>
			   <div class="inp">
			  	<p>券号</p>
			  	<input type="text" v-model="quan_mun" placeholder="请输入券号"/>
			  </div>
			   <div class="inp">
			  	<p>核验码</p>
			  	<input type="text" v-model="heyan_mun" placeholder="请输入核验码"/>
			  </div>
			   
			  <div class="btns" @click="hexiao">
			  	确定
			  </div>
             
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				phone:'18231296694',
				quan_mun:'123456',
				heyan_mun:'123456',
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},
		
			skipto_register() {
				this.$router.push({
					path: '/register'
				});
			},
			hexiao(){
				
			}
			
		},
		mounted() {

		},
	}
</script>

<style>

</style>
<style scoped="scoped">
	.active {
		
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		height: 100%;
	}
	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.lists {
		padding: 2rem ;

	}
.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}
	
	.title div {
		width: calc(100%/3);
		align-items: center;
	}
	
	.title>div:nth-child(2) {
		text-align: center;
	}
	
	.inp{
		padding-top: 2rem ;
	}
	.inp>p{
		color: #D1D5D8;
		font-size: 0.2517rem;
		padding-bottom: 0.5rem;
	}
	.inp>input{
		width: 100%;
		height: 1.5rem;
		border: none;
		border-bottom: 1px solid gray; 
		font-size: 0.65217rem;
	}
	.btns{
		width: 100%;
		height: 2.1913rem;
		background:#007AFF;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3913rem;
		color: white;
		font-size: 0.7826rem;
		margin-top: 6rem;
	}
	.top{
		    font-size: 0.91304rem;
	}

	
	
	
</style>




<!--<template>
	<div id="create_coupons">
		<el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm" :label-position="labelPosition" @submit.native.prevent>
			<el-form-item label="手机号:" style="width: 100%;" id="name" prop="phone">
				<el-input style="margin-left:0 !important;" v-model="form.phone"></el-input>
			</el-form-item>
			<el-form-item label="券号:" style="width: 100%;" id="name" prop="voucher">
				<el-input style="margin-left:0 !important;" v-model="form.voucher"></el-input>
			</el-form-item>
			<el-form-item label="核验码:" style="width: 100%;" id="name" prop="message">
				<el-input style="margin-left:0 !important;" v-model="form.message"></el-input>
			</el-form-item>
			
			<div class="btn">
				
				<el-button style="width: 100%;" type="primary" @click="onSubmit">提交</el-button>

			</div>
		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
         };
			return {
				labelPosition: 'left',
				form: {
					message:'',
					phone:'',
					voucher:'',
				},
				rules: {
					 phone:[{ required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' }],
					voucher: [{
							required: true,
							message: '请输入券号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					message:[{
						required: true,
							message: '请输入短信码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						
					}]
				},

			}

		},

		methods: {
			onSubmit() {

			}
		},
		mounted() {
			
		}
	}
</script>

<style>
	#create_coupons {
		margin: 20px;
	}


	
	.el-col-2 {
		text-align: center;
	}
	.el-form-item__label {
   width: auto !important;
}
#name>.el-form-item__content {
   margin-left: auto !important;
}
.btn{
		position: fixed;
		bottom: 1rem;
		left: 20px;
		right: 20px;
	}
</style>
<style scoped="scoped">
	#name{
		width: 100%;
	}
	
	
</style>-->